<template>
	<div>
		<div class="header">
			<p class="title">待办事项</p>
			<!-- 将添加到文本框的数据，传递到App根组件中进行添加 -->
			<input class="new-todo" type="text" placeholder="请填写任务" v-model.trim="name" @keyup.enter="enterName" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
			}
		},
		methods: {
			enterName() {
				this.$emit('addTodo', this.name) //emit前一定要加上$
				this.name = ''
			}
		}
	}
</script>

<style>
	.header {
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	}

	.title {
		font-size: 36px;
		font-weight: 400;
		text-align: center;
		color: #b83f45;
	}

	.new-todo {
		width: 100%;
		padding: 20px;
		height: 20px;
		border: none;
		border-top: 2px solid #ededed;
	}
</style>